<template>
	<view class="content">
		<view class="address">
			<view class="name">您的信息</view>
			<view class="info">
				<image class="img" src="/static/address.png" mode=""></image>
				<view class="right">
					<view>
						<text>{{address.nickname}}</text>
						<text>{{address.mobile}}</text>
					</view>
					<view class="bottom">
						{{address.address}}
					</view>
				</view>
			</view>
		</view>
		<view class="service">
			<view class="title">您的所选服务</view>
			<view class="type">项目类型：{{obj.name}}</view>
			<view class="type">服务项目：{{obj.names}}</view>
			<view class="type">亩数：{{obj.number}}</view>
		</view>
		<view class="order">
			<view class="name">订单详情</view>
			<view class="money">
				<view class="left">订单金额</view>
				<view class="right">￥{{obj.price?obj.price:0}}</view>
			</view>
			<view class="pay">
				<view class="wx" @tap="wxPay">
					<image class="icon" src="../../../static/wxpay.png" mode=""></image>
					<text>微信支付</text>
					<image v-if="!is_wx" src="../../../static/s0.png" mode=""></image>
					<image v-else src="../../../static/s1.png" mode=""></image>
				</view>
				<view class="wx" @tap="walletPay">
					<image class="icon" src="../../../static/pay2.png" mode=""></image>
					<text>钱包支付</text>
					<image v-if="!is_wallet" src="../../../static/s0.png" mode=""></image>
					<image v-else src="../../../static/s1.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="submit" @tap="submitPay">
			提交支付
		</view>
		<u-popup @close="close" class="pop" v-model="pop_show" mode="center" width="581rpx" height="624rpx" closeable="true">
			<image src="../../../static/item5.png" mode=""></image>
			<text>项目申报单提交成功</text>
			<text>请保持手机畅通</text>
			<view class="btn" @tap="payEnd">完成</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_wx: true,//是否选择微信支付
				is_wallet: false,//是否选择钱包支付
				pop_show: false,//
				address:{},//地址
				obj:{},
				wx_code: '',
			}
		},
		onLoad(options) {
			this.obj = JSON.parse(decodeURIComponent(options.obj));
			console.log(this.obj)
			// #ifdef MP-WEIXIN
			this.getWxcode();
			// #endif
			this.loadAddress();
		},
		methods: {
			getWxcode(){
				let that = this;
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes.code);
					that.wx_code = loginRes.code
				  }
				});
			},
			//选择微信支付
			wxPay(){
				//关闭钱包支付，选择微信支付
				this.is_wallet = false;
				this.is_wx = !this.is_wx;
			},
			//选择钱包支付
			walletPay(){
				this.is_wx = false;
				this.is_wallet = !this.is_wallet;
			},
			//提交支付
			submitPay(){
				if(this.is_wx){
					//微信支付
					this.pay('1');
					return
				}
				//钱包支付
				this.pay('2')
			},
			pay(pay){
				let that = this;
				var type = pay;
				// #ifdef APP-PLUS
				type = 'app'
				// #endif
				// #ifdef MP-WEIXIN
				type= 'miniapp'
				// #endif
				this.$http.post('/api/order/add',{
					pay_method: pay,
					cate_ids: this.obj.cate_ids,
					cate_id: this.obj.cate_id,
					number: this.obj.number,
					// #ifdef MP-WEIXIN
					code: this.wx_code,
					// #endif
					type: type
				}).then(res => {
					if(this.is_wx){
						let result2;
						// #ifdef MP-WEIXIN
						result2 = typeof res.data.data.params == 'string' ? JSON.parse(res.data.data.params) : res.data.data.params
						this.pay1(result2)
						// #endif
						// #ifdef APP-PLUS
						result2 = typeof res.data.data == 'string' ? JSON.parse(res.data.data.params) : res.data.data.params
						this.appPay(result2)
						// #endif
					}else{
						that.pop_show = true;
					}
				})
			},
			//微信支付
			pay1(result2){
				let that = this;
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: result2.timeStamp,
				    nonceStr: result2.nonceStr,
				    package: result2.package,
				    signType: result2.signType,
				    paySign: result2.paySign,
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
						that.pop_show = true;
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
						that.$u.toast('支付失败')
				    }
				});
			},
			//APP支付
			appPay(result2){
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo:result2,
					success: res => {
						that.pop_show = true;
					},
					fail: res => {
						console.log(JSON.stringify(res))
					},
					complete: (res) => {
						console.log(res)
					}
				});
			},
			payEnd(){
				this.pop_show = false;
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//弹出层右上关闭按钮
			close(){
				console.log('关闭了')
				this.pop_show = false;
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			loadAddress(){
				this.$http.post('/api/userinfo/info').then(res => {
					this.address = res.data.data;
					if(this.obj.lever=='承包农户'){
						this.address.address=this.obj.address
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	min-height: 100vh;
	background-color: #F8F8F8;
	padding: 30px 30rpx 90rpx;
	box-sizing: border-box;
}
.address{
	width:690rpx;
	background:rgba(255,255,255,1);
	border-radius:20px;
	padding: 30rpx;
	box-sizing: border-box;
	.name{
		font-size:17px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.info{
		margin-top: 29rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.img{
			width:100rpx;
			height:100rpx;
			background:rgba(63,195,119,1);
			border-radius:50%;
			margin-right: 23rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			height: 100rpx;
			view{
				font-size:14px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			text{
				margin-right: 60rpx;
			}
			.bottom{
				// flex: 1;
				width: 500rpx;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //用省略号显示
				white-space:nowrap; //不换行
			}
		}
	}
}
.service{
	width:690rpx;
	background:rgba(255,255,255,1);
	border-radius:20px;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
	.title{
		font-size:17px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.type{
		margin-top: 28rpx;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
}
.order{
	width:690rpx;
	background:rgba(255,255,255,1);
	border-radius:20px;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
	.name{
		font-size:13px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.money{
		border-bottom: 1px solid #F8F8F8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0 40rpx;
		padding-bottom: 25rpx;
		box-sizing: border-box;
		.left{
			font-size:16px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.right{
			font-size:16px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(63,195,119,1);
		}
	}
	.pay{
		.wx{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 40rpx;
			&:last-child{
				margin-top: 40rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.icon{
				width:67rpx;
				height:67rpx;
			}
			text{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				flex: 1;
				margin: 0 40rpx;
			}
		}
	}
}
.submit{
	width:535rpx;
	height:88rpx;
	background:rgba(63,195,119,1);
	border-radius:10px;
	margin: 100rpx auto 0rpx;
	line-height: 88rpx;
	text-align: center;
	font-size:15px;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(255,255,255,1);
}
.pop{
	padding: 24rpx;
	box-sizing: border-box;
	image{
		width:93rpx;
		height:104rpx;
		display: block;
		margin: 70rpx auto;
	}
	text{
		font-size:18px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		text-align: center;
		display: block;
	}
	.btn{
		width:535rpx;
		height:88rpx;
		background:rgba(63,195,119,1);
		border-radius:10px;
		margin: 68rpx auto 0;
		line-height: 88rpx;
		text-align: center;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
	}
}
</style>
